<template>
  <div class="luggageSorting">
    <div class="setting-icon" @click="settingShow=true"></div>
    <sortingTitle :dataList="topList" />
    <settingsPanel
      :seting="settingShow"
      @closePanel="closePanel"
      :leftList="topParams"
      :rightList="rightList"
      @save="save"
    />
    <div class="luggageSorting-container">
      <div
        class="item-container"
        :class="{'Boxbottom':item.val}"
        v-for="(item,index) in ChartList"
        :key="index"
        v-show="item.val"
      >
        <zichanzhuangtaizhanbi text="资产状态占比"  v-if="item.val&&item.name==='companyCodes1'" />
        <zichanfenleitongji text="资产分类统计"  v-if="item.val&&item.name==='companyCodes2'" />
        <zhichanshiyong text="资产使用情况（统计累积量）"  v-if="item.val&&item.name==='companyCodes3'" />
        <haocailingyong text="耗材领用情况" v-if="item.val&&item.name==='companyCodes6'" />
        <gongsishiyong text="公司使用占比" v-if="item.val&&item.name==='companyCodes5'" />
        <bumenshiyong text="部门使用占比" v-if="item.val&&item.name==='companyCodes4'" />
        <daizhizichan text="呆滞资产清单" v-if="item.val&&item.name==='companyCodes7'" />
        <bumenhaocai text="部门耗材成本占比" v-if="item.val&&item.name==='companyCodes8'" />
        <bumenhaocaiduibi text="耗材使用成本对比" v-if="item.val&&item.name==='companyCodes9'" />
      </div>
    </div>
  </div>
</template>

<script>
import sortingTitle from "@/components/sortingTitle";
import settingsPanel from "@/components/settingsPanel";
import zichanzhuangtaizhanbi from "@/components/zichanzhuangtaizhanbi"; //资产状态占比
import zichanfenleitongji from "@/components/zichanfenleitongji"; //资产分类统计
import zhichanshiyong from "@/components/zichanshiyong"; //资产使用
import haocailingyong from "@/components/haocailingyong"; //耗材领用
import gongsishiyong from "@/components/gongsishiyong"; // 公司使用占比
import bumenshiyong from "@/components/bumenshiyong"; //部门使用占比
import daizhizichan from "@/components/daizhizichan"; //呆滞资产使用占比
import bumenhaocai from "@/components/bumenhaocai"; //部门耗材使用成本占比
import bumenhaocaiduibi from "@/components/bumenhaocaiduibi"; //部门耗材使用成本对比
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
  components: {
    sortingTitle,
    settingsPanel,
    zichanzhuangtaizhanbi,
    zichanfenleitongji,
    zhichanshiyong,
    haocailingyong,
    gongsishiyong,
    bumenshiyong,
    daizhizichan,
    bumenhaocai,
    bumenhaocaiduibi
  },
  data() {
    return {
      settingShow: false,
      setting: false,
      topList: [],
      topParams: [
        { title: "资产总数", name: "assetInCount", val: true },
        { title: "资产总金额", name: "assetInSumAmount", val: true },
        { title: "资产总量", name: "assetTotal", val: true },
        {
          title: "维修中资产数",
          name: "assetUnderMaintenanceCount",
          val: true
        },
        {
          title: "库存耗材总金额",
          name: "consumablesStockAmountCount",
          val: true
        },
        { title: "耗材总量", name: "consumablesTotalCount", val: true },
        {
          title: "离职员工名下资产",
          name: "employeeTurnoverAssetCount",
          val: false
        },
        { title: "当月到期资产数量", name: "expiredAssetCount", val: false },
        {
          title: "维保到期资产数量",
          name: "maintenanceExpiredCount",
          val: false
        },
        { title: "待审批任务数量", name: "pendingApproveCount", val: false },
        { title: "待盘点任务数量", name: "pendingCheckCount", val: false },
        { title: "待签字数量", name: "pendingSignCount", val: false },
        { title: "待确认调拨单数量", name: "pendingTransferCount", val: false },
        { title: "报修资产数量", name: "reportRepairCount", val: false },
        { title: "安全库存报警数量", name: "safeAlertCount", val: false }
      ],
      rightList: [
        { title: "资产状态占比", name: "companyCodes1", val: true },
        { title: "公司使用占比", name: "companyCodes2", val: true },
        { title: "部门使用占比", name: "companyCodes3", val: true },
        { title: "资产分类统计", name: "companyCodes4", val: true },
        { title: "资产使用情况(统计累积量)", name: "companyCodes5", val: true },
        { title: "耗材领用情况", name: "companyCodes6", val: true },
        { title: "呆滞资产清单", name: "companyCodes7", val: false },
        { title: "部门耗材成本占比", name: "companyCodes8", val: false },
        { title: "耗材使用成本占比", name: "companyCodes9", val: false }
      ],
      ChartList:[],
      CompanyList: [], //公司列表
      AssetOfStagnant: [], //获取呆滞资产清单
      AssetStatPercent: [], //获取资产状态占比
      AssetTypeSum: [], //获取资产分类统计
      AssetUseStatus: [], //获取资产使用情况（统计累积量）
      CompanyUsePercent: [], //获取公司使用占比
      ConsumablesCostComparison: [], //获取耗材使用成本对比
      ConsumablesDepartmentCostOf: [], //获取部门耗材成本占比
      DepartmentUsePercent: [], //获取部门使用占比
      HcUseStatus: [], //获取耗材领用情况
      show: false,
      timer:null,
    };
  },
  methods: {
    //获取顶部统计数据
    getStatistics() {
      let localTopList = JSON.parse(localStorage.getItem("localTopList"));
      let params = "";
      if (localTopList) {
        localTopList.leftList.forEach(element => {
          params += "&" + element.name + "=" + element.val;
        });
        params = "?" + params.slice(1);
      } else {
        this.topParams.forEach(item => {
          if (item.val) {
            params += "&" + item.name + "=" + item.val;
          }
          params = "?" + params.slice(1);
        });
      }
      let url = params;
      axios
        .get($api.api + "/smart-uttc/assetManage/getStatistics" + url)
        .then(res => {
          if (res) {
            
            this.topList = [];
            if (localTopList) {
              localTopList.leftList.map(item => {
                this.topList.push({
                  value: res.data[item.name],
                  title: item.title
                });
              });
            }else{
              this.topParams.forEach(item => {
                if(item.val)(
                this.topList.push({
                  value: res.data[item.name],
                  title: item.title
                }));
              });
            }
          }
        });
    },
    // 获取设置的图表数据
    getChartStatic(){
      let localTopList = JSON.parse(localStorage.getItem("localTopList"));
      if(localTopList){
        this.ChartList = []
        localTopList.rightList.map(item=>{
          this.ChartList.push({
            title:item.title,
            name:item.name,
            val:item.val
          })
        })
      }else{
        this.ChartList = []
        this.rightList.map(item=>{
          this.ChartList.push({
            title:item.title,
            name:item.name,
            val:item.val
          })
        })
      }
    },
    closePanel(e) {
      if (e) {
        this.settingShow = false;
      }
    },
    //保存
    save(e) {
      this.settingShow = false;
      localStorage.setItem("localTopList", JSON.stringify(e));
      this.getStatistics();
      // 设置图表可见与不可见
      this.getChartStatic()
    }
  },
  mounted() {
    let localTopList = JSON.parse(localStorage.getItem("localTopList"))
    let localRightList = JSON.parse(localStorage.getItem("localTopList"))
    if (localTopList) {
      this.topParams.map(item => {
        const target = localTopList.leftList.find(i => i.name === item.name);
        if (target) {
          item.val = target.val;
        } else {
          item.val = false;
        }
      });
    }
    if (localRightList) {
      this.rightList.map((item, index) => {
        const rightTarget = localRightList.rightList.find(i => i.name === item.name);
        if (rightTarget) {
          item.val = rightTarget.val;
        } else {
          item.val = false;
        }
      });
    }
    this.getStatistics();
    // 设置图表可见与不可见
    this.getChartStatic()
    // this.getCompanyList();//获取公司列表
    this.timer = setInterval (()=>{
            this.getStatistics();
            // 设置图表可见与不可见
            this.getChartStatic()
    },5*60*1000);
  },
  beforeDestroy() {
        clearInterval(this.timer);        
        this.timer = null;
  }
};
</script>

<style lang="scss" scoped>
.luggageSorting {
  .setting-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../assets/setting-icon.png") no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 9;
  }
  .luggageSorting-container {
    overflow: hidden;
    // height: 833px;
    // overflow-y: auto;
    box-sizing: border-box;
    .item-container {
      width: calc(100% / 2 - 10px);
      float: left;
      margin-right: 20px;
      background: #202224;
      height: 406px;
      border: 1px solid #424345;
      box-sizing: border-box;
    }
    .item-container:nth-child(2n) {
      margin-right: 0;
    }
    .Boxbottom {
      margin-bottom: 20px;
    }
    .Boxbottom:nth-last-child(2){
      margin-bottom: 0px;
    }
    .Boxbottom:last-child{
      margin-bottom: 0px;
    }
  }
}
</style>
<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  /* height: 110px;   */
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #bdbdbd;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.4);
}
</style>